import { uuid } from "./util";
import { Graph } from "@antv/x6";
// 画布基本设置（这些例子上面都有）
export const configSetting = Shape => {
  return {
    grid: {
      size: 10, // 网格大小 10px
      visible: true // 绘制网格，默认绘制 dot 类型网格
    }, // 网格
    autoResize: true, // 自带的自适应容器大小属性。
    panning: {
      enabled: true
    },
    mousewheel: {
      // 鼠标滚轮缩放画布
      enabled: true, // 开启
      zoomAtMousePosition: true, // 缩放点跟随鼠标位置
      modifiers: "alt", // 键盘按键, 触发方式变为:鼠标滚轮+键盘按键
      minScale: 0.5, // 最小缩放
      maxScale: 3 // 最大缩放
    },
    connecting: {
      allowMulti: "withPort",
      validateMagnet({ e, magnet, view, cell }) {
        console.log(e, magnet, view, cell);
        return true;
      },
      // 连线规则
      router: {
        // 连线路径点规则
        name: "manhattan", // 自动避开路径上的其他节点
        args: {
          padding: 25
        }
      },
      connector: {
        // 连接样式
        name: "normal" // 简单连接器
      },
      anchor: "center", // 连接节点时锚点的位置
      connectionPoint: {
        name: "anchor",
        args: {
          offset: 6
        }
      },
      allowBlank: graph => {
        const { edge } = graph;
        if (edge && edge.id.indexOf("line-") !== -1) {
          return true;
        }
        return false;
      }, // 是否可连接空白位置的点
      snap: {
        radius: 20 // 连线时距离连接桩20px触发吸附
      },
      createEdge() {
        // 连接过程中创建新的连线
        return new Shape.Edge({
          attrs: {
            line: {
              stroke: "#768791", // 线颜色
              strokeWidth: 1, // 线宽
              targetMarker: {
                // 目标箭头属性
                name: "classic", // 箭头样式:经典箭头
                width: 12, // 箭头宽
                offset: -6,
                height: 8 // 箭头高
              }
            }
          }
        });
      },
      validateConnection({ targetMagnet }) {
        // 连接线是否有效
        return !!targetMagnet; // 以是否有目标链接对象作为连接线的有效判断
      }
    },
    highlighting: {
      magnetAdsorbed: {
        name: "stroke",
        args: {
          attrs: {
            fill: "#5F95FF",
            stroke: "#5F95FF"
          }
        }
      }
    },
    resizing: {
      // 节点缩放 最小限制为40px，最大限制为400px
      enabled: true,
      preserveAspectRatio: false, //等比例缩放
      minWidth: 1,
      minHeight: 1
    },
    rotating: true, // 节点旋转
    selecting: {
      enabled: true,
      multiple: false, // 关闭多选
      rubberband: true, // 框选
      modifiers: "ctrl",
      showNodeSelectionBox: true, // 展示选择框效果
      filter(node) {
        const data = node.getData();
        if (data && data?.lock) return false;
        return true;
      }
    },
    translating: {
      restrict: cellView => {
        if (cellView) {
          //使用后发现部分场景下cellView为undefined
          const { cell } = cellView;
          if (cell && cell.isNode()) {
            const data = cell.getData();
            if (data && data?.lock) return cell.getBBox();
          }
        }
        return false;
      }
    },
    snapline: {
      enabled: true
      // filter(node) {  //过滤掉锁定的节点
      //   if (node && node.isNode()) {
      //     const data = node.getData();
      //     if (data && data?.lock) return true;
      //   }
      //   return false;
      // }
    }, // 辅助对齐线
    keyboard: true, // 键盘快捷键 开启后监听键盘事件
    history: false, // 因目前为自动保存模式,顾关闭历史操作记录功能
    clipboard: {
      enabled: true,
      useLocalStorage: true
    }, // 剪切板 开启后可复制黏贴
    //拖入/拖出群组节点
    embedding: {
      enabled: true,
      findParent({ node }) {
        const bbox = node.getBBox();
        return this.getNodes().filter(node => {
          // 只有 data.parent 为 true 的节点才是父节点
          const data = node.getData();
          if (data && data.parent) {
            const targetBBox = node.getBBox();
            return bbox.isIntersectWithRect(targetBBox);
          }
          return false;
        });
      }
    }
    // scroller: {
    //   enabled: true,
    //   pannable: true,
    //   pageBreak: true,
    //   autoResize: true
    // }
  };
};

/**
 * svg背景
 */
const filter = {
  tagName: "defs",
  selector: "defs",
  children: [
    {
      tagName: "filter",
      attrs: {
        id: "f4",
        x: 0,
        y: 0,
        width: "200%",
        height: "200%"
      },
      children: [
        {
          tagName: "feOffset",
          attrs: {
            result: "offOut",
            in: "SourceGraphic",
            dx: 2,
            dy: 2
          }
        },
        {
          tagName: "feColorMatrix",
          attrs: {
            result: "matrixOut",
            in: "offOut",
            type: "matrix",
            values: "0.2 0 0 0 0 0 0.2 0 0 0 0 0 0.2 0 0 0 0 0 1 0"
          }
        },
        {
          tagName: "feGaussianBlur",
          attrs: {
            result: "blurOut",
            in: "matrixOut",
            stdDeviation: "10"
          }
        },
        {
          tagName: "feBlend",
          attrs: {
            in: "SourceGraphic",
            in2: "blurOut",
            mode: "normal"
          }
        }
      ]
    }
  ]
};

/**
 * 节点预设类型
 * 到时候通过传入的type===通过匹配 data里面设置的type获取到相应的节点设置内容
 * 编辑的时候也可以通过节点里面的data.type 获取到到底是什么节点进行响应设设置
 */
export const configNodeShape = type => {
  const nodeShapeList = [
    {
      data: {
        type: "defaultEllipse"
      },
      shape: "ellipse",
      x: 200,
      y: 40,
      width: 150,
      height: 80,
      label: "ellipse",
      attrs: {
        body: {
          fill: "rgb(240,194,161)",
          stroke: "#333"
        },
        label: {
          fontSize: 16,
          fill: "#333",
          textWrap: {
            text: "",
            width: -10, // 宽度减少 10px
            height: "50%", // 高度为参照元素高度的一半
            ellipsis: true, // 文本超出显示范围时，自动添加省略号
            breakWord: true // 是否截断单词
          }
        }
      }
    },
    {
      data: {
        type: "defaultRRect"
      },
      x: 360,
      y: 40,
      width: 120,
      height: 60,
      label: "rect",
      attrs: {
        body: {
          stroke: "#333",
          fill: "#eee",
          rx: 10,
          ry: 10
        },
        label: {
          fontSize: 16,
          fill: "#333",
          textWrap: {
            text: "END",
            width: -10, // 宽度减少 10px
            height: "50%", // 高度为参照元素高度的一半
            ellipsis: true, // 文本超出显示范围时，自动添加省略号
            breakWord: true // 是否截断单词
          }
        }
      }
    },
    //圆形
    {
      data: {
        type: "defaultCircle"
      },
      shape: "circle",
      width: 100,
      height: 100,

      attrs: {
        label: {
          fontSize: 16,
          fill: "#333",
          textWrap: {
            text: "",
            width: -10, // 宽度减少 10px
            height: "50%", // 高度为参照元素高度的一半
            ellipsis: true, // 文本超出显示范围时，自动添加省略号
            breakWord: true // 是否截断单词
          }
        },
        body: {
          fill: "#fff",
          stroke: "#333"
        }
      }
    },
    {
      data: {
        type: "defaultJiCheng",
        parent: true
      },
      shape: "rect",
      width: 400,
      height: 400,
      attrs: {
        label: {
          refX: 0.5,
          refY: -4,
          textAnchor: "middle",
          textVerticalAnchor: "bottom",
          textWrap: {
            text: "",
            width: -10, // 宽度减少 10px
            height: "50%", // 高度为参照元素高度的一半
            ellipsis: true, // 文本超出显示范围时，自动添加省略号
            breakWord: true // 是否截断单词
          },
          fontSize: 14,
          fill: "#333"
        },
        body: {
          fill: "none",
          stroke: "#333",
          strokeWidth: 2
        }
      }
    },
    {
      data: {
        type: "defaultXieZuo",
        parent: true
      },
      shape: "rect",
      width: 200,
      height: 400,
      attrs: {
        label: {
          refX: 0.5,
          refY: -4,
          textAnchor: "middle",
          textVerticalAnchor: "bottom",
          textWrap: {
            text: "协作框",
            width: -10, // 宽度减少 10px
            height: "50%", // 高度为参照元素高度的一半
            ellipsis: true, // 文本超出显示范围时，自动添加省略号
            breakWord: true // 是否截断单词
          },
          fontSize: 14,
          fill: "#f00"
        },
        body: {
          fill: "none",
          stroke: "#f00",
          strokeWidth: 3,
          strokeDasharray: "5,10"
        }
      }
    },
    {
      data: {
        type: "defaultShuYu"
      },
      shape: "rect",
      width: 150,
      height: 80,
      attrs: {
        label: {
          fontSize: 16,
          fill: "#333",
          textWrap: {
            text: "技术术语",
            width: -10, // 宽度减少 10px
            height: "50%", // 高度为参照元素高度的一半
            ellipsis: true, // 文本超出显示范围时，自动添加省略号
            breakWord: true // 是否截断单词
          }
        },
        body: {
          fill: "rgb(194,193,193)",
          stroke: "#333"
        }
      }
    },
    {
      data: {
        type: "defaultHuoDong"
      },
      width: 150,
      height: 80,
      markup: [
        {
          tagName: "rect",
          selector: "body"
        },
        {
          tagName: "text",
          selector: "label"
        }
      ],
      attrs: {
        label: {
          fontSize: 16,
          fill: "#333",
          textWrap: {
            text: "活动",
            width: -10, // 宽度减少 10px
            height: "50%", // 高度为参照元素高度的一半
            ellipsis: true, // 文本超出显示范围时，自动添加省略号
            breakWord: true // 是否截断单词
          }
        },
        body: {
          fill: "rgb(192,255,252)",
          stroke: "#333"
        }
      }
    },
    {
      data: {
        type: "defaultActivity",
        sort: true
      },
      width: 150,
      height: 80,
      markup: [
        {
          tagName: "rect",
          selector: "body"
        },
        {
          tagName: "rect",
          selector: "body2"
        },
        {
          tagName: "text",
          selector: "label"
        },
        {
          tagName: "text",
          selector: "index"
        }
      ],
      attrs: {
        index: {
          refX: 0.5,
          refY: 0.15,
          textAnchor: "middle",
          textVerticalAnchor: "middle",
          text: "",
          fontSize: 13,
          fill: "#333"
        },
        label: {
          fontSize: 16,
          fill: "#333",
          refX: 0.5,
          refY: 0.65,
          textWrap: {
            text: "",
            width: -10, // 宽度减少 10px
            height: "50%", // 高度为参照元素高度的一半
            ellipsis: true, // 文本超出显示范围时，自动添加省略号
            breakWord: true // 是否截断单词
          }
        },
        body: {
          fill: "rgb(158,200,255)",
          stroke: "#333",
          refWidth: 1,
          refHeight: 0.3
        },
        body2: {
          fill: "rgb(158,200,255)",
          stroke: "#333",
          refWidth: 1,
          refHeight: 0.7,
          refY: 0.3
        }
      }
    },
    //泳池
    {
      data: {
        type: "defaultYongChi",
        parent: true
      },
      shape: "rect",
      width: 600,
      height: 300,
      markup: [
        {
          tagName: "rect",
          selector: "body",
          attrs: {
            width: 40
          }
        },
        {
          tagName: "rect",
          selector: "body2"
        },
        {
          tagName: "text",
          selector: "label",
          attrs: {
            width: 40,
            x: 20,
            "writing-mode": "tb-rl"
          }
        }
      ],
      attrs: {
        label: {
          ref: "body",
          refX: 0,
          refY: 0.5,
          refHeight: 1,
          textAnchor: "middle",
          textVerticalAnchor: "middle",
          text: "",
          fontSize: 14,
          fontWeight: 600,
          fill: "#000"
        },
        body: {
          fill: "rgb(181,215,214)",
          stroke: "#333",
          refX: 0,
          refY: 0,
          refHeight: 1
        },
        body2: {
          fill: {
            type: "linearGradient",
            stops: [
              { offset: "0%", color: "rgb(194,210,220)" },
              { offset: "40%", color: "rgb(212,232,232)" },
              { offset: "80%", color: "rgb(241,247,248)" }
            ]
          },
          stroke: "#333",
          refX: 40,
          refY: 0,
          refWidth: -40,
          refHeight: 1
        }
      }
    },
    //角色列表
    {
      data: {
        type: "defaultJueSeList",
        isRole: true
      },
      shape: "rect",
      width: 150,
      height: 100,
      markup: [
        {
          tagName: "rect",
          selector: "body",
        },
        {
          tagName: "text",
          selector: "label"
        }
      ],
      attrs: {
        body: {
          fill: "rgb(255,255,162)",
          stroke: "#333",
        },
        label: {
          fontSize: 16,
          fill: "#333",
          textWrap: {
            text: "",
            width: -10, // 宽度减少 10px
            height: "50%", // 高度为参照元素高度的一半
            ellipsis: true, // 文本超出显示范围时，自动添加省略号
            breakWord: true // 是否截断单词
          }
        },
      }
    },
    //公司LOGO
    {
      data: {
        type: "defaultImage",
        image: true
      },
      shape: "image",
      width: 300,
      height: 200,
      imageUrl: require("../assets/processImg/hongliLogo.png")
    },
    //level1
    {
      data: {
        type: "defaultLevel1",
        image: true
      },
      shape: "image",
      width: 200,
      height: 200,
      imageUrl: require("../assets/processImg/level1.png")
    },
    //level2
    {
      data: {
        type: "defaultLevel2",
        image: true
      },
      shape: "image",
      width: 200,
      height: 200,
      imageUrl: require("../assets/processImg/level2.png")
    },
    //level3
    {
      data: {
        type: "defaultLevel3",
        image: true
      },
      shape: "image",
      width: 200,
      height: 200,
      imageUrl: require("../assets/processImg/level3.png")
    },
    //level4
    {
      data: {
        type: "defaultLevel4",
        image: true
      },
      shape: "image",
      width: 200,
      height: 200,
      imageUrl: require("../assets/processImg/level4.png")
    },
    //矩形
    {
      data: {
        type: "defaultRect",
        isLink: true
      },
      shape: "rect",
      width: 120,
      height: 60,
      attrs: {
        label: {
          fontSize: 16,
          fill: "#333",
          textWrap: {
            text: "",
            width: -10, // 宽度减少 10px
            height: "50%", // 高度为参照元素高度的一半
            ellipsis: true, // 文本超出显示范围时，自动添加省略号
            breakWord: true // 是否截断单词
          }
        },
        body: {
          fill: {
            type: "linearGradient",
            stops: [
              { offset: "0%", color: "rgb(158,254,156)" },
              { offset: "40%", color: "rgb(176,255,176)" },
              { offset: "80%", color: "rgb(196,255,199)" }
            ]
          },
          stroke: "#333"
        }
      }
    },
    //角色
    {
      data: {
        type: "defaultJueSe"
      },
      shape: "rect",
      width: 120,
      height: 60,

      attrs: {
        label: {
          fontSize: 16,
          fill: "#333",
          textWrap: {
            text: "角色",
            width: -10, // 宽度减少 10px
            height: "50%", // 高度为参照元素高度的一半
            ellipsis: true, // 文本超出显示范围时，自动添加省略号
            breakWord: true // 是否截断单词
          }
        },
        body: {
          fill: "rgb(255,255,162)",
          stroke: "#333"
        }
      }
    },
    //客户
    {
      data: {
        type: "defaultKeHu"
      },
      shape: "rect",
      width: 120,
      height: 60,

      attrs: {
        label: {
          fontSize: 16,
          fill: "#333",
          textWrap: {
            text: "",
            width: -10, // 宽度减少 10px
            height: "50%", // 高度为参照元素高度的一半
            ellipsis: true, // 文本超出显示范围时，自动添加省略号
            breakWord: true // 是否截断单词
          }
        },
        body: {
          fill: "rgb(255,255,162)",
          stroke: "#333"
        }
      }
    },
    //公共角色
    {
      data: {
        type: "defaultGongGongJueSe"
      },
      shape: "rect",
      width: 150,
      height: 80,
      attrs: {
        label: {
          fontSize: 16,
          fill: "#333",
          textWrap: {
            text: "",
            width: -10, // 宽度减少 10px
            height: "50%", // 高度为参照元素高度的一半
            ellipsis: true, // 文本超出显示范围时，自动添加省略号
            breakWord: true // 是否截断单词
          }
        },
        body: {
          fill: "rgb(255,255,223)",
          stroke: "#aaa",
          strokeDasharray: "5,10"
        }
      }
    },
    {
      data: {
        type: "defaultXuNiJueSe"
      },
      shape: "rect",
      width: 150,
      height: 80,
      attrs: {
        label: {
          fontSize: 16,
          fill: "#333",
          textWrap: {
            text: "",
            width: -10, // 宽度减少 10px
            height: "50%", // 高度为参照元素高度的一半
            ellipsis: true, // 文本超出显示范围时，自动添加省略号
            breakWord: true // 是否截断单词
          }
        },
        body: {
          fill: "rgb(255,255,162)",
          stroke: "#333",
          strokeDasharray: "5,10"
        }
      }
    },
    //流程开始
    {
      data: {
        type: "defaultLiuChengKaiShi"
      },
      shape: "rect",
      width: 100,
      height: 50,

      attrs: {
        body: {
          rx: 6,
          ry: 6,
          fill: "#fff",
          stroke: "#333"
        },
        label: {
          fontSize: 16,
          fill: "#ff0000",
          textWrap: {
            text: "流程开始",
            width: -10, // 宽度减少 10px
            height: "50%", // 高度为参照元素高度的一半
            ellipsis: true, // 文本超出显示范围时，自动添加省略号
            breakWord: true // 是否截断单词
          }
        }
      }
    },
    //流程结束
    {
      data: {
        type: "defaultLiuChengJieShu"
      },
      shape: "rect",
      width: 100,
      height: 50,

      attrs: {
        body: {
          rx: 6,
          ry: 6,
          fill: "#fff",
          stroke: "#333"
        },
        label: {
          fontSize: 16,
          fill: "#ff0000",
          textWrap: {
            text: "流程结束",
            width: -10, // 宽度减少 10px
            height: "50%", // 高度为参照元素高度的一半
            ellipsis: true, // 文本超出显示范围时，自动添加省略号
            breakWord: true // 是否截断单词
          }
        }
      }
    },
    {
      data: {
        type: "defaultRhombus",
        sort: true
      },
      markup: [
        {
          tagName: "polygon",
          selector: "body"
        },
        {
          tagName: "text",
          selector: "label"
        },
        {
          tagName: "text",
          selector: "index"
        }
      ],
      width: 120,
      height: 120,
      attrs: {
        index: {
          refX: 0.5,
          refY: 0.15,
          textAnchor: "middle",
          textVerticalAnchor: "middle",
          text: "",
          fontSize: 13,
          fill: "#333"
        },
        body: {
          refPoints: "0,10 10,0 20,10 10,20",
          fill: "rgb(255,215,255)",
          stroke: "rgb(255,215,255)"
        },
        label: {
          fontSize: 14,
          fill: "#333"
        }
      }
    },
    {
      data: {
        type: "defaultPingShen",
        sort: true
      },
      markup: [
        {
          tagName: "polygon",
          selector: "body"
        },
        {
          tagName: "text",
          selector: "label"
        },
        {
          tagName: "text",
          selector: "index"
        }
      ],
      width: 120,
      height: 96,
      attrs: {
        index: {
          refX: 0.5,
          refY: 0.15,
          textAnchor: "middle",
          textVerticalAnchor: "middle",
          text: "",
          fontSize: 13,
          fill: "#333"
        },
        body: {
          refPoints: "0,10 10,0 20,10 10,20",
          fill: "#00ff00",
          stroke: "#333"
        },
        label: {
          fontSize: 14,
          fill: "#333"
        }
      }
    },
      //菱形
    {
      data: {
        type: "defaultLingXing"
      },
      markup: [
        {
          tagName: "polygon",
          selector: "body"
        },
        {
          tagName: "text",
          selector: "label"
        },
        {
          tagName: "text",
          selector: "index"
        }
      ],
      width: 120,
      height: 96,
      attrs: {
        index: {
          refX: 0.5,
          refY: 0.15,
          textAnchor: "middle",
          textVerticalAnchor: "middle",
          text: "",
          fontSize: 13,
          fill: "#333"
        },
        body: {
          refPoints: "0,10 10,0 20,10 10,20",
          fill: "#ff0000",
          stroke: "#333"
        },
        label: {
          fontSize: 14,
          fill: "#333"
        }
      }
    },
      //决策
    {
      data: {
        type: "defaultJueCe",
        sort: true
      },
      markup: [
        {
          tagName: "polygon",
          selector: "body"
        },
        {
          tagName: "text",
          selector: "label"
        },
        {
          tagName: "text",
          selector: "index"
        }
      ],
      width: 120,
      height: 96,
      attrs: {
        index: {
          refX: 0.5,
          refY: 0.15,
          textAnchor: "middle",
          textVerticalAnchor: "middle",
          text: "",
          fontSize: 13,
          fill: "#333"
        },
        body: {
          refPoints: "0,10 10,0 20,10 10,20",
          fill: "#ff0000",
          stroke: "#333"
        },
        label: {
          fontSize: 14,
          fill: "#333"
        }
      }
    },
    //圆形流程开始
    {
      data: {
        type: "defaultCircleStart"
      },
      shape: "circle",
      width: 100,
      height: 100,
      attrs: {
        label: {
          fontSize: 16,
          fill: "#ff0000",
          textWrap: {
            text: "开始",
            width: -10, // 宽度减少 10px
            height: "50%", // 高度为参照元素高度的一半
            ellipsis: true, // 文本超出显示范围时，自动添加省略号
            breakWord: true // 是否截断单词
          }
        },
        body: {
          fill: "#fff",
          stroke: "#333"
        }
      }
    },
    //圆形流程结束
    {
      data: {
        type: "defaultCircleEND"
      },
      shape: "circle",
      width: 100,
      height: 100,

      attrs: {
        label: {
          fontSize: 16,
          fill: "#ff0000",
          textWrap: {
            text: "结束",
            width: -10, // 宽度减少 10px
            height: "50%", // 高度为参照元素高度的一半
            ellipsis: true, // 文本超出显示范围时，自动添加省略号
            breakWord: true // 是否截断单词
          }
        },
        body: {
          fill: "#fff",
          stroke: "#333"
        }
      }
    },
    {
      data: {
        type: "defaultTo"
      },
      shape: "circle",
      width: 60,
      height: 60,

      attrs: {
        label: {
          fontSize: 16,
          fill: "#333",
          textWrap: {
            text: "To",
            width: -10, // 宽度减少 10px
            height: "50%", // 高度为参照元素高度的一半
            ellipsis: true, // 文本超出显示范围时，自动添加省略号
            breakWord: true // 是否截断单词
          }
        },
        body: {
          fill: "rgb(155,185,255)",
          stroke: "#333"
        }
      }
    },
    {
      data: {
        type: "defaultFrom"
      },
      shape: "circle",
      width: 60,
      height: 60,

      attrs: {
        label: {
          fontSize: 16,
          fill: "#333",
          textWrap: {
            text: "From",
            width: -10, // 宽度减少 10px
            height: "50%", // 高度为参照元素高度的一半
            ellipsis: true, // 文本超出显示范围时，自动添加省略号
            breakWord: true // 是否截断单词
          }
        },
        body: {
          fill: "rgb(155,185,255)",
          stroke: "#333"
        }
      }
    },
    {
      data: {
        type: "defaultXOR"
      },
      shape: "circle",
      width: 60,
      height: 60,

      attrs: {
        label: {
          fontSize: 16,
          fill: "#333",
          textWrap: {
            text: "XOR",
            width: -10, // 宽度减少 10px
            height: "50%", // 高度为参照元素高度的一半
            ellipsis: true, // 文本超出显示范围时，自动添加省略号
            breakWord: true // 是否截断单词
          }
        },
        body: {
          fill: "rgb(180,179,180)",
          stroke: "#333"
        }
      }
    },
    {
      data: {
        type: "defaultOR"
      },
      shape: "circle",
      width: 60,
      height: 60,

      attrs: {
        label: {
          fontSize: 16,
          fill: "#333",
          textWrap: {
            text: "OR",
            width: -10, // 宽度减少 10px
            height: "50%", // 高度为参照元素高度的一半
            ellipsis: true, // 文本超出显示范围时，自动添加省略号
            breakWord: true // 是否截断单词
          }
        },
        body: {
          fill: "rgb(180,179,180)",
          stroke: "#333"
        }
      }
    },
    {
      data: {
        type: "defaultAND"
      },
      shape: "circle",
      width: 60,
      height: 60,

      attrs: {
        label: {
          fontSize: 16,
          fill: "#333",
          textWrap: {
            text: "AND",
            width: -10, // 宽度减少 10px
            height: "50%", // 高度为参照元素高度的一半
            ellipsis: true, // 文本超出显示范围时，自动添加省略号
            breakWord: true // 是否截断单词
          }
        },
        body: {
          fill: "rgb(180,179,180)",
          stroke: "#333"
        }
      }
    },
    {
      data: {
        type: "extendGroup",
        parent: true
      },
      width: 3000,
      height: 200,
      shape: "rect",
      attrs: {
        label: {
          refX: 0.5,
          refY: -4,
          textAnchor: "middle",
          textVerticalAnchor: "bottom",
          textWrap: {
            text: "",
            width: -10, // 宽度减少 10px
            height: "50%", // 高度为参照元素高度的一半
            ellipsis: true, // 文本超出显示范围时，自动添加省略号
            breakWord: true // 是否截断单词
          },
          fontSize: 16,
          fill: "#333"
        },
        body: {
          fill: "none",
          stroke: "#777",
          strokeWidth: 3,
          strokeDasharray: "5,10"
        }
      }
    },
    {
      data: {
        type: "extendOR"
      },
      x: 50,
      y: 180,
      width: 60,
      height: 60,
      markup: [
        { ...filter },
        {
          tagName: "path",
          selector: "body"
        },
        {
          tagName: "text",
          selector: "label"
        }
      ],
      // https://www.svgrepo.com/svg/13653/like

      attrs: {
        label: {
          refX: 0.5,
          refY: "100%",
          refY2: 4,
          textAnchor: "middle",
          textVerticalAnchor: "top",
          fontSize: 16,
          fill: "#333"
        },
        body: {
          filter: "url(#f4)",
          fill: "#333",
          stroke: "#333",
          strokeWidth: 1,
          refD:
            "M485.871492 47.174338c-9.168729-0.008066-18.33651 3.392487-25.137616 10.224908L57.381424 460.755494c-13.603161 13.602212-13.540056 36.674443 0.062631 50.276655l403.288872 403.286025c13.603161 13.606956 36.673969 13.66674 50.276655 0l403.352926-403.350079c13.602686-13.601737 13.539581-36.674918-0.064054-50.27713L511.009107 57.399246c-6.801106-6.801106-15.969361-10.217316-25.137615-10.224908z m-0.030841 59.805036l378.943153 378.946-378.943153 378.94173-378.943153-378.94173 378.943153-378.946z m0.020402 174.891c-112.560341 0-204.023684 91.469037-204.023684 204.02748 0 112.558443 91.463343 204.023684 204.023684 204.023685s204.023684-91.465241 204.023685-204.023685c0-112.558918-91.463343-204.02748-204.023685-204.02748z m0 22.62765c100.307533 0 181.402203 81.093246 181.402203 181.39983 0 100.306109-81.09467 181.405524-181.402203 181.405524-100.307058 0-181.401728-81.099415-181.401728-181.405524 0-100.306584 81.09467-181.400305 181.401728-181.400304z"
        }
      }
    },
    {
      data: {
        type: "extendAND"
      },
      x: 50,
      y: 180,
      width: 60,
      height: 60,
      markup: [
        { ...filter },
        {
          tagName: "path",
          selector: "body"
        },
        {
          tagName: "text",
          selector: "label"
        }
      ],
      // https://www.svgrepo.com/svg/13653/like

      attrs: {
        label: {
          refX: 0.5,
          refY: "100%",
          refY2: 4,
          textAnchor: "middle",
          textVerticalAnchor: "top",
          fontSize: 16,
          fill: "#333"
        },
        body: {
          filter: "url(#f4)",
          fill: "#333",
          stroke: "#333",
          strokeWidth: 1,
          refD:
            "M485.871492 47.174338c-9.168729-0.008066-18.33651 3.392487-25.137616 10.224908L57.381424 460.755494c-13.603161 13.602212-13.540056 36.674443 0.062631 50.276655l403.288872 403.286025c13.603161 13.606956 36.673969 13.66674 50.276655 0l403.352926-403.350079c13.602686-13.601737 13.539581-36.674918-0.064054-50.27713L511.009107 57.399246c-6.801106-6.801106-15.969361-10.217316-25.137615-10.224908z m-0.030841 59.805036l378.943153 378.946-378.943153 378.94173-378.943153-378.94173 378.943153-378.946z m-10.34495 156.490911c0 0.004745-4.581992 0.872083-4.584365 0.872082-0.004745 0-3.752138 2.525623-3.754984 2.525624-0.004745 0.004745-2.608182 3.856048-2.610555 3.856047 0 0.004745-0.882521 4.590533-0.883944 4.590533V463.610402H275.283938l-0.03179-0.037009c0 0.004745-4.563488 1.010154-4.56586 1.010155-0.004745 0.004745-3.751663 2.525149-3.754036 2.525149l0.003796-0.046499c-0.004745 0.004745-2.608182 3.856048-2.610554 3.856048-0.004745 0-0.882996 4.591007-0.884893 4.591007v20.625371s0.876827 4.641776 0.908142 4.673566c0 0.004745 2.599167 3.764474 2.599167 3.764474 0.004745 0.004745 3.775387 2.525149 3.776811 2.525149 0.004745 0.004745 4.581518 1.009206 4.583415 1.009206h188.355615v188.264041l-0.029892-0.02752c0 0.004745 0.909092 4.673566 0.908617 4.673566 0 0.004745 2.598218 3.764 2.598218 3.764 0.004745 0.004745 3.776811 2.5242 3.777285 2.5242 0 0 4.550203 0.964131 4.584365 1.010629l20.6211-0.004745c0.005219 0 4.671668-0.964131 4.674515-0.964131 0 0 3.752138-2.5242 3.754985-2.5242 0.004745-0.004745 2.595371-3.765423 2.598218-3.765423 0 0 0.895332-4.659332 0.896755-4.659331V508.125523h188.309116c0.005219 0.004745 4.672142-0.963656 4.67404-0.963656 0.004745 0 3.753087-2.525149 3.754985-2.525149 0.004745-0.004745 2.595846-3.764474 2.598692-3.764474 0 0 0.894857-4.659332 0.896756-4.659332v-20.6211c0-0.004745-0.890587-4.545458-0.889164-4.591008-0.004745-0.004745-2.585882-3.856048-2.618146-3.856047-0.004745-0.004745-3.775862-2.5242-3.77681-2.5242 0 0.004745-4.659332-1.010629-4.661704-0.964605h-188.289188V275.364866c0-0.004745-0.891062-4.544034-0.889638-4.590059-0.004745-0.004745-2.585882-3.856997-2.585882-3.856996-0.004745-0.004745-3.774913-2.5242-3.775862-2.5242-0.004745 0-4.672617-0.918581-4.674514-0.918582l-20.624897-0.004744z"
        }
      }
    },
    {
      data: {
        type: "extendXOR"
      },
      x: 50,
      y: 180,
      width: 60,
      height: 60,
      markup: [
        { ...filter },
        {
          tagName: "path",
          selector: "body"
        },
        {
          tagName: "text",
          selector: "label"
        }
      ],
      // https://www.svgrepo.com/svg/13653/like

      attrs: {
        label: {
          refX: 0.5,
          refY: "100%",
          refY2: 4,
          textAnchor: "middle",
          textVerticalAnchor: "top",
          fontSize: 16,
          fill: "#333"
        },
        body: {
          filter: "url(#f4)",
          fill: "#333",
          stroke: "#333",
          strokeWidth: 1,
          refD:
            "M485.871492 47.174338c-9.168729-0.008066-18.33651 3.392487-25.137616 10.224908L57.381424 460.755494c-13.603161 13.602212-13.540056 36.674443 0.062631 50.276655l403.288872 403.286025c13.603161 13.606956 36.673969 13.66674 50.276655 0l403.352926-403.350079c13.602686-13.601737 13.539581-36.674918-0.064054-50.27713L511.009107 57.399246c-6.801106-6.801106-15.969361-10.217316-25.137615-10.224908z m-0.030841 59.805036l378.943153 378.946-378.943153 378.94173-378.943153-378.94173 378.943153-378.946zM344.31891 317.829311c-0.006643 0-4.560641 0.872083-4.564436 0.872083-0.004745 0-3.864114 2.615773-3.866961 2.615773l-14.581525 14.584847c-0.004745 0-2.661797 3.902546-2.663696 3.94857 0 0.004745-0.824161 4.498011-0.823686 4.498011 0 0.004745 0.886317 4.452936 0.88774 4.452935 0 0.004745 2.532741 3.94857 2.535588 3.94857l133.188084 133.184763-133.12403 133.12498v-0.041754c0 0.004745-2.661797 3.947621-2.663696 3.947621 0 0.004745-0.823686 4.499434-0.823686 4.499434 0 0.009489 0.886317 4.452936 0.88774 4.452936 0 0 2.533215 3.901597 2.535588 3.947621l14.582474 14.579627c0.004745 0.004745 3.990798 2.617197 3.994119 2.617197 0.004745 0 4.434431 0.872083 4.438227 0.872083 0.004745 0 4.497536-0.825584 4.500858-0.825584 0.004745 0 3.928642-2.663695 3.931014-2.663696l133.125929-133.128775 133.154871 133.156769c0.004745 0.004745 3.991273 2.617197 3.99412 2.617197 0.004745 0 4.434431 0.872083 4.438226 0.872083 0.004745 0 4.498011-0.827008 4.501807-0.827008 0.004745 0 3.926744-2.661797 3.929116-2.661797l14.582949-14.580577c0.004745-0.004745 2.597743-3.855573 2.600116-3.855573 0-0.004745 0.88774-4.545458 0.88774-4.591007 0-0.004745-0.886791-4.452936-0.888689-4.452936 0 0-2.59632-3.994119-2.599167-3.994119l-133.140163-133.142535 133.141112-133.139214c0.004745 0 2.596794-3.856048 2.599167-3.856048 0-0.004745 0.88774-4.544509 0.88774-4.544509 0-0.009489-0.886317-4.452936-0.887266-4.452935 0-0.004745-2.659899-3.94857-2.662746-3.94857l-14.582949-14.584372c-0.004745 0-3.863639-2.616248-3.86696-2.616248-0.004745 0-4.433957-0.873032-4.437753-0.873032-0.004745 0-4.561116 0.873032-4.564436 0.873032-0.004745 0-3.864588 2.616248-3.866961 2.616248l-133.143484 133.143484-133.203268-133.207538v-0.041754c-0.004745 0-3.927693-2.5242-3.931014-2.5242-0.004745 0-4.431584-0.871608-4.436804-0.872083h-0.000949z"
        }
      }
    },
    //手动输入
    {
      data: {
        type: "extendShouDong"
      },
      x: 50,
      y: 180,
      width: 110,
      height: 80,
      markup: [
        { ...filter },
        {
          tagName: "path",
          selector: "body"
        },
        {
          tagName: "text",
          selector: "label"
        }
      ],
      // https://www.svgrepo.com/svg/13653/like

      attrs: {
        label: {
          fontSize: 16,
          fill: "#333",
          textAnchor: "middle",
          textWrap: {
            text: "",
            width: -10, // 宽度减少 10px
            height: "50%", // 高度为参照元素高度的一半
            ellipsis: true, // 文本超出显示范围时，自动添加省略号
            breakWord: true // 是否截断单词
          }
        },
        body: {
          filter: "url(#f4)",
          fill: "#fff",
          stroke: "#333",
          strokeWidth: 1,
          refD:
            "M30.323599,99.311883L279.719173,59.698716v159.010601L30.323599,219.82518q-.557929-122.187092,0-120.513297Z"
        }
      }
    },
    {
      data: {
        type: "extendKCP"
      },
      x: 50,
      y: 180,
      width: 70,
      height: 60,
      markup: [
        { ...filter },
        {
          tagName: "path",
          selector: "body"
        },
        {
          tagName: "text",
          selector: "label"
        }
      ],
      // https://www.svgrepo.com/svg/13653/like

      attrs: {
        label: {
          fontSize: 16,
          fill: "#333",
          refX: 0.5,
          refY: 0.25,
          textAnchor: "middle",
          textVerticalAnchor: "top",
          textWrap: {
            text: "KCP",
            width: -10, // 宽度减少 10px
            height: "50%", // 高度为参照元素高度的一半
            ellipsis: true, // 文本超出显示范围时，自动添加省略号
            breakWord: true // 是否截断单词
          }
        },
        body: {
          filter: "url(#f4)",
          fill: "#ff0000",
          stroke: "#333",
          strokeWidth: 1,
          refD:
            "M40.015601,39.521581q220.488819.520021,219.968798.520021Q150,227.76911,150,229.849193t-109.984399-189.807591"
        }
      }
    },
    {
      data: {
        type: "extendBackIn"
      },
      x: 50,
      y: 180,
      width: 50,
      height: 50,
      markup: [
        { ...filter },
        {
          tagName: "path",
          selector: "body"
        },
        {
          tagName: "text",
          selector: "label"
        }
      ],
      // https://www.svgrepo.com/svg/13653/like

      attrs: {
        label: {
          refX: 0.5,
          refY: 0.05,
          refY2: 3,
          textAnchor: "middle",
          textVerticalAnchor: "top",
          fontSize: 12,
          fill: "#333"
        },
        body: {
          filter: "url(#f4)",
          fill: "#37dc13",
          stroke: "#333",
          strokeWidth: 1,
          refD:
            "M30.135205,30.681227l239.72959-1.040041L150,121.684866v118.044722-118.044722L30.135205,30.681227Z"
        }
      }
    },
    {
      data: {
        type: "extendBackOut"
      },
      x: 50,
      y: 180,
      width: 50,
      height: 50,
      markup: [
        { ...filter },
        {
          tagName: "path",
          selector: "body"
        },
        {
          tagName: "text",
          selector: "label"
        }
      ],
      // https://www.svgrepo.com/svg/13653/like

      attrs: {
        label: {
          refX: 0.5,
          refY: 0.75,
          refY2: 3,
          textAnchor: "middle",
          textVerticalAnchor: "top",
          fontSize: 12,
          fill: "#333"
        },
        body: {
          filter: "url(#f4)",
          fill: "#37dc13",
          stroke: "#333",
          strokeWidth: 1,
          refD:
            "M150,269.370775L30.655226,170.566823L150,169.526781v-109.204368v109.204368h120.904836L150,269.370775Z"
        }
      }
    },
    {
      data: {
        type: "extendLink2",
        isLink: true
      },
      x: 50,
      y: 180,
      width: 150,
      height: 80,
      markup: [
        { ...filter },
        {
          tagName: "path",
          selector: "body1",
          groupSelector: "body"
        },
        {
          tagName: "path",
          selector: "body2",
          groupSelector: "body"
        },
        {
          tagName: "text",
          selector: "label"
        }
      ],
      // https://www.svgrepo.com/svg/13653/like

      attrs: {
        label: {
          fontSize: 16,
          fill: "#333",
          textWrap: {
            text: "",
            width: -10, // 宽度减少 10px
            height: "50%", // 高度为参照元素高度的一半
            ellipsis: true, // 文本超出显示范围时，自动添加省略号
            breakWord: true // 是否截断单词
          }
        },
        body: {
          filter: "url(#f4)",
          fill: "#fff",
          stroke: "#333",
          strokeWidth: 1
        },
        body1: {
          refX: 0.25,
          refY: 0.15,
          refD:
            "M19.734789,70.722829l221.008841-.520021l49.401975,79.797191-49.921996,79.329173-221.00884,1.040042.262618-80.624556.257402-79.021829Z"
        },
        body2: {
          refD:
            "M19.734789,70.722829l221.008841-.520021-.000003,79.54185-.520018,79.584514-221.00884,1.040042.262618-80.624556.257402-79.021829Z"
        }
      }
    },
    {
      data: {
        type: "extendSanjiaoXing"
      },
      x: 50,
      y: 180,
      width: 80,
      height: 80,
      markup: [
        { ...filter },
        {
          tagName: "path",
          selector: "body"
        },
        {
          tagName: "text",
          selector: "label"
        }
      ],
      // https://www.svgrepo.com/svg/13653/like

      attrs: {
        label: {
          fontSize: 16,
          fill: "#333",
          refX: 0.5,
          refY: 0.75,
          textAnchor: "middle",
          textVerticalAnchor: "bottom"
        },
        body: {
          filter: "url(#f4)",
          fill: "#fff",
          stroke: "#333",
          strokeWidth: 1,
          refD:
            "M905.216 895.488H119.808c-11.264 0-22.016-6.144-27.648-15.872-5.632-9.728-5.632-22.016 0-31.744L484.864 167.424c5.632-9.728 16.384-15.872 27.648-15.872s22.016 6.144 27.648 15.872l392.704 679.936c5.632 9.728 5.632 22.016 0 31.744s-16.384 16.384-27.648 16.384z"
        }
      }
    },
    {
      data: {
        type: "extendGuanJianKongZhi"
      },
      x: 50,
      y: 180,
      width: 80,
      height: 80,
      markup: [
        { ...filter },
        {
          tagName: "path",
          selector: "body"
        },
        {
          tagName: "text",
          selector: "label"
        }
      ],
      // https://www.svgrepo.com/svg/13653/like

      attrs: {
        label: {
          fontSize: 16,
          fill: "#333",
          refX: 0.5,
          refY: 0.75,
          textAnchor: "middle",
          textVerticalAnchor: "bottom"
        },
        body: {
          filter: "url(#f4)",
          fill: "rgb(146,208,80)",
          stroke: "rgb(146,208,80)",
          strokeWidth: 1,
          refD:
            "M905.216 895.488H119.808c-11.264 0-22.016-6.144-27.648-15.872-5.632-9.728-5.632-22.016 0-31.744L484.864 167.424c5.632-9.728 16.384-15.872 27.648-15.872s22.016 6.144 27.648 15.872l392.704 679.936c5.632 9.728 5.632 22.016 0 31.744s-16.384 16.384-27.648 16.384z"
        }
      }
    },
    {
      data: {
        type: "extendEND"
      },
      x: 50,
      y: 180,
      width: 80,
      height: 80,
      markup: [
        { ...filter },
        {
          tagName: "path",
          selector: "body"
        },
        {
          tagName: "text",
          selector: "label"
        }
      ],
      // https://www.svgrepo.com/svg/13653/like

      attrs: {
        label: {
          fontSize: 16,
          fill: "#333",
          refX: 0.5,
          refY: 0.75,
          textAnchor: "middle",
          textVerticalAnchor: "bottom",
          textWrap: {
            text: "END",
            width: -10, // 宽度减少 10px
            height: "50%", // 高度为参照元素高度的一半
            ellipsis: true, // 文本超出显示范围时，自动添加省略号
            breakWord: true // 是否截断单词
          }
        },
        body: {
          filter: "url(#f4)",
          fill: "rgb(204,255,102)",
          stroke: "#333",
          strokeWidth: 1,
          refD:
            "M905.216 895.488H119.808c-11.264 0-22.016-6.144-27.648-15.872-5.632-9.728-5.632-22.016 0-31.744L484.864 167.424c5.632-9.728 16.384-15.872 27.648-15.872s22.016 6.144 27.648 15.872l392.704 679.936c5.632 9.728 5.632 22.016 0 31.744s-16.384 16.384-27.648 16.384z"
        }
      }
    },
    {
      data: {
        type: "extendTiXing"
      },
      x: 50,
      y: 180,
      width: 120,
      height: 80,
      markup: [
        { ...filter },
        {
          tagName: "path",
          selector: "body"
        },
        {
          tagName: "text",
          selector: "label"
        }
      ],
      // https://www.svgrepo.com/svg/13653/like

      attrs: {
        label: {
          fontSize: 16,
          fill: "#333",
          textWrap: {
            text: "",
            width: -10, // 宽度减少 10px
            height: "50%", // 高度为参照元素高度的一半
            ellipsis: true, // 文本超出显示范围时，自动添加省略号
            breakWord: true // 是否截断单词
          }
        },
        body: {
          filter: "url(#f4)",
          fill: "rgb(244,198,198)",
          stroke: "#333",
          strokeWidth: 1,
          refD: "M912 765.398H112l135.796-506.797h506.799z"
        }
      }
    },
    {
      data: {
        type: "extendDengYaoTiXing"
      },
      x: 50,
      y: 180,
      width: 120,
      height: 80,
      markup: [
        { ...filter },
        {
          tagName: "path",
          selector: "body"
        },
        {
          tagName: "text",
          selector: "label"
        }
      ],
      // https://www.svgrepo.com/svg/13653/like

      attrs: {
        label: {
          fontSize: 16,
          fill: "#333",
          textWrap: {
            text: "",
            width: -10, // 宽度减少 10px
            height: "50%", // 高度为参照元素高度的一半
            ellipsis: true, // 文本超出显示范围时，自动添加省略号
            breakWord: true // 是否截断单词
          }
        },
        body: {
          filter: "url(#f4)",
          fill: "#fff",
          stroke: "#333",
          strokeWidth: 1,
          refD:
            "M40.366282,70.245861l219.267436-.501757-59.708981,111.389864h-99.347717L40.366282,70.245861Z"
        }
      }
    },
    {
      data: {
        type: "extendBaoBiao"
      },
      x: 50,
      y: 180,
      width: 100,
      height: 80,
      markup: [
        { ...filter },
        {
          tagName: "path",
          selector: "body"
        },
        {
          tagName: "text",
          selector: "label"
        }
      ],
      // https://www.svgrepo.com/svg/13653/like

      attrs: {
        label: {
          fontSize: 16,
          fill: "#333",
          textWrap: {
            text: "试制报表",
            width: -10, // 宽度减少 10px
            height: "50%", // 高度为参照元素高度的一半
            ellipsis: true, // 文本超出显示范围时，自动添加省略号
            breakWord: true // 是否截断单词
          }
        },
        body: {
          filter: "url(#f4)",
          fill: "#FF7B39",
          stroke: "#333",
          strokeWidth: 1,
          refD:
            "M90.04014,68.740591l169.593578,1.003513v111.389864h-219.267436v-70.245861L90.04014,68.740591Z"
        }
      }
    },
    {
      data: {
        type: "extendZhiDu"
      },
      x: 50,
      y: 180,
      width: 100,
      height: 80,
      markup: [
        { ...filter },
        {
          tagName: "path",
          selector: "body"
        },
        {
          tagName: "text",
          selector: "label"
        }
      ],
      // https://www.svgrepo.com/svg/13653/like

      attrs: {
        label: {
          fontSize: 16,
          fill: "#333",
          textWrap: {
            text: "",
            width: -10, // 宽度减少 10px
            height: "50%", // 高度为参照元素高度的一半
            ellipsis: true, // 文本超出显示范围时，自动添加省略号
            breakWord: true // 是否截断单词
          }
        },
        body: {
          filter: "url(#f4)",
          fill: "rgb(205,96,145)",
          stroke: "#333",
          strokeWidth: 1,
          refD:
            "M19.734789,70.722829l221.008841-.520021l49.401975,79.797191-49.921996,79.329173-221.00884,1.040042.52002-159.646385Z"
        }
      }
    },
    {
      data: {
        type: "extendJianTouWuBianXing",
        isLink: true
      },
      x: 50,
      y: 180,
      width: 100,
      height: 80,
      markup: [
        { ...filter },
        {
          tagName: "path",
          selector: "body"
        },
        {
          tagName: "text",
          selector: "label"
        }
      ],
      // https://www.svgrepo.com/svg/13653/like

      attrs: {
        label: {
          fontSize: 16,
          fill: "#333",
          textWrap: {
            text: "",
            width: -10, // 宽度减少 10px
            height: "50%", // 高度为参照元素高度的一半
            ellipsis: true, // 文本超出显示范围时，自动添加省略号
            breakWord: true // 是否截断单词
          }
        },
        body: {
          filter: "url(#f4)",
          fill: {
            type: "linearGradient",
            stops: [
              { offset: "0%", color: "rgb(158,254,156)" },
              { offset: "40%", color: "rgb(176,255,176)" },
              { offset: "80%", color: "rgb(196,255,199)" }
            ]
          },
          stroke: "#333",
          strokeWidth: 1,
          refD:
            "M19.734789,70.722829l221.008841-.520021l49.401975,79.797191-49.921996,79.329173-221.00884,1.040042.52002-159.646385Z"
        }
      }
    },
    {
      data: {
        type: "extendJianTouLiuBianXing",
        isLink: true
      },
      x: 50,
      y: 180,
      width: 100,
      height: 80,
      markup: [
        { ...filter },
        {
          tagName: "path",
          selector: "body"
        },
        {
          tagName: "text",
          selector: "label"
        }
      ],
      // https://www.svgrepo.com/svg/13653/like

      attrs: {
        label: {
          fontSize: 16,
          fill: "#333",
          textWrap: {
            text: "",
            width: -10, // 宽度减少 10px
            height: "50%", // 高度为参照元素高度的一半
            ellipsis: true, // 文本超出显示范围时，自动添加省略号
            breakWord: true // 是否截断单词
          }
        },
        body: {
          filter: "url(#f4)",
          fill: {
            type: "linearGradient",
            stops: [
              { offset: "0%", color: "rgb(158,254,156)" },
              { offset: "40%", color: "rgb(176,255,176)" },
              { offset: "80%", color: "rgb(196,255,199)" }
            ]
          },
          stroke: "#333",
          strokeWidth: 1,
          refD:
            "M19.734789,70.722829l221.008841-.520021l49.401975,79.797191-49.921996,79.329173-221.00884,1.040042l52.002079-80.369215-51.482059-79.27717Z"
        }
      }
    },
    {
      data: {
        type: "extendJianTou"
      },
      x: 50,
      y: 180,
      width: 120,
      height: 60,
      markup: [
        { ...filter },
        {
          tagName: "path",
          selector: "body"
        },
        {
          tagName: "text",
          selector: "label"
        }
      ],
      // https://www.svgrepo.com/svg/13653/like

      attrs: {
        label: {
          fontSize: 16,
          fill: "#333",
          textWrap: {
            text: "",
            width: -10, // 宽度减少 10px
            height: "50%", // 高度为参照元素高度的一半
            ellipsis: true, // 文本超出显示范围时，自动添加省略号
            breakWord: true // 是否截断单词
          }
        },
        body: {
          filter: "url(#f4)",
          fill: "rgb(45,245,18)",
          stroke: "#333",
          strokeWidth: 1,
          refD: "M389.6 183.5l569.8 329-569.8 329V662.8H65.5V362.4h324.1z"
        }
      }
    },
    {
      data: {
        type: "extendShuangJianTou"
      },
      x: 50,
      y: 180,
      width: 140,
      height: 60,
      markup: [
        { ...filter },
        {
          tagName: "path",
          selector: "body"
        },
        {
          tagName: "text",
          selector: "label"
        }
      ],
      // https://www.svgrepo.com/svg/13653/like

      attrs: {
        label: {
          fontSize: 16,
          fill: "#333",
          textWrap: {
            text: "",
            width: -10, // 宽度减少 10px
            height: "50%", // 高度为参照元素高度的一半
            ellipsis: true, // 文本超出显示范围时，自动添加省略号
            breakWord: true // 是否截断单词
          }
        },
        body: {
          filter: "url(#f4)",
          fill: "rgb(45,245,18)",
          stroke: "#333",
          strokeWidth: 1,
          refD:
            "M962 512l-361.147-450v230.625h-177.705v-230.625l-361.148 450 361.147 450v-230.625h177.705v230.625z"
        }
      }
    },
    {
      data: {
        type: "extendName"
      },
      x: 50,
      y: 180,
      width: 400,
      height: 80,
      markup: [
        { ...filter },
        {
          tagName: "rect",
          selector: "body"
        },
        {
          tagName: "text",
          selector: "label"
        }
      ],
      // https://www.svgrepo.com/svg/13653/like

      attrs: {
        label: {
          fontSize: 25,
          fontWeight: 600,
          fill: "#333",
          textWrap: {
            text: "名称文本框",
            width: -10, // 宽度减少 10px
            height: "50%", // 高度为参照元素高度的一半
            ellipsis: true, // 文本超出显示范围时，自动添加省略号
            breakWord: true // 是否截断单词
          }
        },
        body: {
          fill: "none",
          stroke: "none"
        }
      }
    },
    {
      data: {
        type: "extendText"
      },
      x: 50,
      y: 180,
      width: 200,
      height: 60,
      markup: [
        { ...filter },
        {
          tagName: "rect",
          selector: "body"
        },
        {
          tagName: "text",
          selector: "label"
        }
      ],
      // https://www.svgrepo.com/svg/13653/like

      attrs: {
        label: {
          fontSize: 16,
          fill: "#333",
          textWrap: {
            text: "文本",
            width: -10, // 宽度减少 10px
            height: "50%", // 高度为参照元素高度的一半
            ellipsis: true, // 文本超出显示范围时，自动添加省略号
            breakWord: true // 是否截断单词
          }
        },
        body: {
          fill: "none",
          stroke: "none"
        }
      }
    },
    {
      data: {
        type: "extendTime"
      },
      x: 50,
      y: 180,
      width: 200,
      height: 80,
      markup: [
        { ...filter },
        {
          tagName: "text",
          selector: "label"
        },
        {
          tagName: "rect",
          selector: "body"
        }
      ],
      // https://www.svgrepo.com/svg/13653/like

      attrs: {
        label: {
          fontSize: 16,
          fill: "#333",
          textWrap: {
            text: "",
            width: -10, // 宽度减少 10px
            height: "50%", // 高度为参照元素高度的一半
            ellipsis: true, // 文本超出显示范围时，自动添加省略号
            breakWord: true // 是否截断单词
          }
        },
        body: {
          fill: "none",
          stroke: "none"
        }
      }
    },
    {
      data: {
        type: "extendLink",
        isLink: true
      },
      x: 50,
      y: 180,
      width: 80,
      height: 80,
      markup: [
        { ...filter },
        {
          tagName: "path",
          selector: "body"
        },
        {
          tagName: "text",
          selector: "label"
        }
      ],
      // https://www.svgrepo.com/svg/13653/like

      attrs: {
        label: {
          refX: 0.5,
          refY: "100%",
          refY2: 4,
          textAnchor: "middle",
          textVerticalAnchor: "top",
          fontSize: 16,
          fill: "#333"
        },
        body: {
          fill: "#5da6ff",
          stroke: "#333",
          strokeWidth: 1,
          filter: "url(#f4)",
          refD:
            "M515.2 64c-246.4 0-448 198.4-448 444.8S268.8 953.6 512 953.6c246.4 0 444.8-201.6 444.8-444.8S758.4 64 515.2 64z m-118.4 441.6c-9.6 9.6-28.8 9.6-41.6 0l-22.4-25.6-12.8-9.6c-19.2-22.4-32-48-35.2-76.8 0-28.8 9.6-57.6 28.8-76.8 22.4-19.2 48-28.8 76.8-28.8 28.8 0 60.8 12.8 83.2 35.2l86.4 86.4c22.4 22.4 35.2 51.2 35.2 80 0 25.6-9.6 51.2-28.8 70.4-9.6 9.6-28.8 9.6-41.6 0-9.6-9.6-9.6-28.8 0-38.4 19.2-19.2 16-51.2-3.2-73.6l-86.4-86.4c-12.8-12.8-25.6-19.2-41.6-19.2-9.6 0-22.4 3.2-32 12.8-12.8 12.8-12.8 25.6-12.8 35.2 0 12.8 6.4 28.8 19.2 38.4l12.8 12.8 22.4 22.4c3.2 12.8 3.2 28.8-6.4 41.6z m307.2 201.6c-19.2 19.2-44.8 28.8-73.6 28.8-28.8 0-60.8-12.8-83.2-35.2l-86.4-86.4c-22.4-22.4-35.2-51.2-35.2-80 0-25.6 9.6-51.2 28.8-70.4 9.6-9.6 28.8-9.6 41.6 0 9.6 9.6 9.6 28.8 0 38.4-19.2 19.2-16 51.2 3.2 73.6l86.4 86.4c12.8 12.8 25.6 19.2 41.6 19.2 9.6 0 22.4-3.2 32-12.8 12.8-12.8 12.8-25.6 12.8-35.2 0-12.8-6.4-28.8-19.2-38.4l-25.6-25.6-9.6-9.6c-9.6-9.6-9.6-28.8 0-38.4 9.6-9.6 28.8-9.6 41.6 0l12.8 12.8 19.2 19.2c22.4 19.2 35.2 48 35.2 73.6 9.6 32-3.2 57.6-22.4 80z"
        }
      }
    },
    {
      data: {
        type: "extendNote"
      },
      x: 50,
      y: 180,
      width: 80,
      height: 80,
      markup: [
        { ...filter },
        {
          tagName: "path",
          selector: "body"
        },
        {
          tagName: "text",
          selector: "label"
        }
      ],
      // https://www.svgrepo.com/svg/13653/like

      attrs: {
        label: {
          refX: 0.5,
          refY: "100%",
          refY2: 4,
          textAnchor: "middle",
          textVerticalAnchor: "top",
          fontSize: 16,
          fill: "#333"
        },
        body: {
          fill: "#13e199",
          stroke: "#333",
          strokeWidth: 1,
          filter: "url(#f4)",
          refD:
            "M823.296 60.416q65.536 0 99.328 38.4t33.792 93.696l0 543.744q0 25.6-21.504 46.08l-171.008 163.84q-13.312 11.264-22.528 14.336t-23.552 3.072l-459.776 0q-23.552 0-47.104-9.728t-41.984-27.648-30.208-43.008-11.776-55.808l0-634.88q0-60.416 33.28-96.256t94.72-35.84l568.32 0zM608.256 702.464q13.312 0 22.528-9.216t9.216-22.528q0-14.336-9.216-23.04t-22.528-8.704l-320.512 0q-13.312 0-22.528 8.704t-9.216 23.04q0 13.312 9.216 22.528t22.528 9.216l320.512 0zM736.256 509.952q13.312 0 22.528-9.216t9.216-22.528-9.216-22.528-22.528-9.216l-448.512 0q-13.312 0-22.528 9.216t-9.216 22.528 9.216 22.528 22.528 9.216l448.512 0zM799.744 318.464q13.312 0 22.528-9.216t9.216-23.552q0-13.312-9.216-22.528t-22.528-9.216l-512 0q-13.312 0-22.528 9.216t-9.216 22.528q0 14.336 9.216 23.552t22.528 9.216l512 0z"
        }
      }
    },
    {
      data: {
        type: "extendYuanZhuTi"
      },
      x: 50,
      y: 180,
      width: 80,
      height: 80,
      markup: [
        { ...filter },
        {
          tagName: "path",
          selector: "body"
        },
        {
          tagName: "text",
          selector: "label"
        }
      ],
      style: {
        position: "relative"
      },
      // https://www.svgrepo.com/svg/13653/like

      attrs: {
        label: {
          refX: 0.5,
          refY: "100%",
          refY2: 4,
          textAnchor: "middle",
          textVerticalAnchor: "top",
          fontSize: 16,
          fill: "#333"
        },
        body: {
          fill: "#333",
          stroke: "#333",
          strokeWidth: 1,
          filter: "url(#f4)",
          refD:
            "M916.48 335.552C910.592 11.648 113.408 11.52 107.52 335.552v352c0 324.16 809.344 325.376 809.472 0zM264.448 213.44C572.736 35.008 1063.68 287.104 759.552 463.424 448.448 643.776-38.4 389.248 264.448 213.44z m588.288 474.432c0 105.344-165.44 182.464-340.736 183.744-175.296-1.28-340.672-78.4-340.736-183.744V473.6c158.208 150.72 521.536 152.384 681.472 0z"
        }
      }
    },
    {
      data: {
        type: "extendShuJuKu"
      },
      x: 50,
      y: 180,
      width: 80,
      height: 80,
      markup: [
        { ...filter },
        {
          tagName: "path",
          selector: "body"
        },
        {
          tagName: "text",
          selector: "label"
        }
      ],
      style: {
        position: "relative"
      },
      // https://www.svgrepo.com/svg/13653/like

      attrs: {
        label: {
          refX: 0.5,
          refY: "100%",
          refY2: 4,
          textAnchor: "middle",
          textVerticalAnchor: "top",
          fontSize: 16,
          fill: "#333"
        },
        body: {
          fill: "#333",
          stroke: "#333",
          strokeWidth: 1,
          filter: "url(#f4)",
          refD:
            "M959.718832 123.963683C872.444401 50.185297 704.593576 0.299912 511.850044 0.299912S151.255687 50.185297 63.981255 123.963683C23.193205 158.453578 0 198.04198 0 240.22962v543.840672c0 132.461193 229.132871 239.929708 511.850044 239.929708s511.850044-107.468515 511.850044-239.929708v-543.840672c0-42.18764-23.193205-81.776042-63.981256-116.265937zM87.774285 189.64444c19.794201-21.893586 50.685151-43.087377 89.373816-61.182075 42.287611-19.794201 92.073025-35.489603 147.956653-46.586352C384.087474 70.17944 446.869081 64.281168 511.850044 64.281168s127.76257 5.898272 186.745289 17.594845c55.883628 11.096749 105.669042 26.792151 147.956654 46.586352 38.688665 18.094699 69.579615 39.28849 89.373816 61.182075 15.795372 17.494875 23.793029 34.489896 23.793029 50.48521 0 16.095285-7.997657 33.090306-23.793029 50.485209-19.794201 21.893586-50.685151 43.087377-89.373816 61.182075-42.287611 19.894172-92.073025 35.489603-147.956654 46.586352-58.98272 11.696573-121.864298 17.594845-186.745289 17.594845s-127.76257-5.898272-186.74529-17.594845c-55.883628-11.096749-105.669042-26.792151-147.956653-46.586352-38.688665-18.094699-69.579615-39.28849-89.373816-61.182075C71.978912 273.319926 63.981255 256.324905 63.981255 240.22962s7.997657-33.090306 23.79303-50.58518zM63.981255 356.495558c87.274431 73.778385 255.125256 123.66377 447.868789 123.66377s360.594357-49.885385 447.868788-123.66377v155.254515c0 16.095285-7.997657 33.090306-23.793029 50.48521-19.794201 21.893586-50.685151 43.087377-89.373816 61.182075-42.287611 19.794201-92.073025 35.489603-147.956654 46.586352-58.98272 11.696573-121.864298 17.594845-186.745289 17.594845s-127.76257-5.898272-186.74529-17.594845c-55.883628-11.096749-105.669042-26.792151-147.956653-46.586352-38.688665-18.094699-69.579615-39.28849-89.373816-61.182075C71.978912 544.740408 63.981255 527.745387 63.981255 511.750073V356.495558z m895.737577 427.574734c0 16.095285-7.997657 33.090306-23.793029 50.485209-19.794201 21.893586-50.685151 43.087377-89.373816 61.182076-42.287611 19.894172-92.073025 35.489603-147.956654 46.586352-58.98272 11.696573-121.864298 17.594845-186.745289 17.594845s-127.76257-5.898272-186.74529-17.594845c-55.883628-11.096749-105.669042-26.792151-147.956653-46.586352-38.688665-18.094699-69.579615-39.28849-89.373816-61.182076C71.978912 817.160597 63.981255 800.165576 63.981255 784.070292V627.91604c87.274431 73.778385 255.125256 123.66377 447.868789 123.663771s360.594357-49.885385 447.868788-123.663771v156.154252z,M167.950796 519.847701m-39.988285 0a39.988285 39.988285 0 1 0 79.976569 0 39.988285 39.988285 0 1 0-79.976569 0Z,M167.950796 791.768037m-39.988285 0a39.988285 39.988285 0 1 0 79.976569 0 39.988285 39.988285 0 1 0-79.976569 0Z"
        }
      }
    },
    {
      data: {
        type: "extendYongHu"
      },
      x: 50,
      y: 180,
      width: 80,
      height: 80,
      markup: [
        { ...filter },
        {
          tagName: "path",
          selector: "body"
        },
        {
          tagName: "text",
          selector: "label"
        }
      ],
      style: {
        position: "relative"
      },
      // https://www.svgrepo.com/svg/13653/like

      attrs: {
        label: {
          refX: 0.5,
          refY: "100%",
          refY2: 4,
          textAnchor: "middle",
          textVerticalAnchor: "top",
          fontSize: 16,
          fill: "#333"
        },
        body: {
          fill: "#333",
          stroke: "#333",
          strokeWidth: 1,
          filter: "url(#f4)",
          refD:
            "M617.216 696.192v-94.08C650.24 578.56 670.464 512 670.464 512c0-31.36 31.36-41.472 31.36-41.472 43.136-41.472 0-115.2 0-115.2V222.08C662.528 100.608 513.408 84.864 513.408 84.864s-150.016 15.616-189.44 137.088V355.2s-43.392 73.856 0 115.2c0 0 31.488 10.112 31.488 41.472 0 0 20.352 66.56 53.632 90.112v94.08S20.48 813.568 32.256 939.008h959.488c11.776-125.312-374.528-242.816-374.528-242.816z"
        }
      }
    },
    {
      data: {
        type: "extendImage"
      },
      x: 50,
      y: 180,
      width: 80,
      height: 80,
      markup: [
        { ...filter },
        {
          tagName: "path",
          selector: "body"
        },
        {
          tagName: "text",
          selector: "label"
        }
      ],
      // https://www.svgrepo.com/svg/13653/like

      attrs: {
        label: {
          refX: 0.5,
          refY: "100%",
          refY2: 4,
          textAnchor: "middle",
          textVerticalAnchor: "top",
          fontSize: 16,
          fill: "#333"
        },
        body: {
          fill: "#333",
          stroke: "#333",
          strokeWidth: 1,
          filter: "url(#f4)",
          refD:
            "M810.666667 640V341.333333H213.333333v277.333334l59.733334-55.466667 115.2 98.133333 226.133333-196.266666L810.666667 640z m85.333333-384v512H128V256h768z"
        }
      }
    },
    {
      data: {
        type: "extendFengXian"
      },
      x: 50,
      y: 180,
      width: 80,
      height: 80,
      markup: [
        { ...filter },
        {
          tagName: "path",
          selector: "body"
        },
        {
          tagName: "text",
          selector: "label"
        }
      ],
      style: {
        position: "relative"
      },
      // https://www.svgrepo.com/svg/13653/like

      attrs: {
        label: {
          refX: 0.5,
          refY: "100%",
          refY2: 4,
          textAnchor: "middle",
          textVerticalAnchor: "top",
          fontSize: 16,
          fill: "#333"
        },
        body: {
          fill: "#f00",
          stroke: "#333",
          strokeWidth: 1,
          filter: "url(#f4)",
          refD:
            "M112.8 917.9c-40.8 0-60.6-44.9-42.7-79.3 24.5-47 379.8-666 401.7-705.6 19.7-35.5 66.7-36.1 86.4 0 30 55.1 377.3 671.6 394.6 703.9 21.8 40.2-5.8 81-42.9 81H112.8z m380.1-261.2h42L563.1 381h-98.2l28 275.7z m-28 39.5V775h98.2v-78.7l-98.2-0.1z"
        }
      }
    }
  ];
  if (type) {
    const obj = nodeShapeList.find(item => {
      return item.data.type === type;
    });
    return obj || nodeShapeList;
  }
  return nodeShapeList;
};

//注册自定义的edge
Graph.registerEdge(
  "custom-edge-label",
  {
    inherit: "edge",
    defaultLabel: {
      markup: [
        {
          tagName: "rect",
          selector: "body",
          attrs: {
            x: -20
          }
        },
        {
          tagName: "text",
          selector: "label"
        }
      ],
      attrs: {
        label: {
          fill: "#000",
          fontSize: 14,
          textAnchor: "start",
          textVerticalAnchor: "middle",
          pointerEvents: "none"
        },
        body: {
          ref: "label",
          fill: "#ffd591",
          stroke: "#ffa940",
          strokeWidth: 2,
          rx: 4,
          ry: 4,
          refWidth: "100%",
          refWidth2: 40,
          refHeight: "140%",
          refY: "-20%"
        }
      },
      position: {
        distance: -1,
        options: {
          absoluteDistance: true,
          reverseDistance: true
        }
      }
    }
  },
  true
);

/**
 * 连线预设类型
 * 0横线: line-row,
 * 0横线: line-vertical,
 * 到时候通过传入的type===通过匹配
 */
export const configEdgeShape = type => {
  const edgeList = [
    {
      type: "line-row",
      // 为id添加标识，以方便识别后添加调节工具
      id: "line-" + uuid(),
      source: { x: 100, y: 40 },
      target: { x: 400, y: 40 },
      router: {
        // 连线路径点规则
        name: "normal", // 自动避开路径上的其他节点
        args: {
          padding: 1 // 最小间隔1
        }
      },
      attrs: {
        line: {
          sourceMarker: {
            tagName: "path",
            d: ""
          },
          targetMarker: {
            tagName: "path",
            d: ""
          },
          stroke: "#333" // 指定 path 元素的填充色
        }
      }
    },
    {
      type: "line-vertical",
      // 为id添加标识，以方便识别后添加调节工具
      id: "line-" + uuid(),
      source: { x: 100, y: 40 },
      target: { x: 400, y: 40 },
      router: {
        // 连线路径点规则
        name: "normal", // 自动避开路径上的其他节点
        args: {
          padding: 1 // 最小间隔1
        }
      },
      attrs: {
        line: {
          sourceMarker: {
            tagName: "path",
            d: ""
          },
          targetMarker: {
            tagName: "path",
            d: ""
          },
          stroke: "#333" // 指定 path 元素的填充色
        }
      }
    },
    {
      type: "line-divide-row",
      // 为id添加标识，以方便识别后添加调节工具
      id: "line-" + uuid(),
      source: { x: 100, y: 40 },
      target: { x: 400, y: 40 },
      router: {
        // 连线路径点规则
        name: "normal", // 自动避开路径上的其他节点
        args: {
          padding: 1 // 最小间隔1
        }
      },
      attrs: {
        line: {
          sourceMarker: {
            tagName: "path",
            d: ""
          },
          targetMarker: {
            tagName: "path",
            d: ""
          },
          strokeDasharray: "5,10",
          stroke: "#aaa" // 指定 path 元素的填充色
        }
      }
    },
    {
      type: "line-divide-vertical",
      // 为id添加标识，以方便识别后添加调节工具
      id: "line-" + uuid(),
      source: { x: 100, y: 40 },
      target: { x: 400, y: 40 },
      router: {
        // 连线路径点规则
        name: "normal", // 自动避开路径上的其他节点
        args: {
          padding: 1 // 最小间隔1
        }
      },
      attrs: {
        line: {
          sourceMarker: {
            tagName: "path",
            d: ""
          },
          targetMarker: {
            tagName: "path",
            d: ""
          },
          strokeDasharray: "5,10",
          stroke: "#aaa" // 指定 path 元素的填充色
        }
      }
    },
    //注释
    {
      type: "line-annotation",
      // 为id添加标识，以方便识别后添加调节工具
      id: "line-" + uuid(),
      shape: "custom-edge-label",
      source: { x: 50, y: 50 },
      target: { x: 150, y: 100 },
      vertices: [{ x: 100, y: 100 }],
      attrs: {
        line: {
          sourceMarker: {
            tagName: "path",
            d: ""
          },
          targetMarker: {
            tagName: "path",
            d: ""
          },
          stroke: "#3c4260",
          strokeWidth: 2
        }
      },
      labels: [
        {
          attrs: {
            text: {
              text: "请填写注释"
            }
          }
        }
      ],
      router: {
        // 连线路径点规则
        name: "normal", // 自动避开路径上的其他节点
        args: {
          padding: 1 // 最小间隔1
        }
      }
    }
  ];
  if (type) {
    const obj = edgeList.find(item => {
      return item.type === type;
    });
    return obj || edgeList;
  }
  return edgeList;
};

/**
 * KCP KSF PA 虚线圈扩效果
 */
export const guanjianMarkup = [
  {
    tagName: "ellipse",
    selector: "guanjian"
  },
  {
    tagName: "text",
    selector: "guanjianLabel",
    attrs: {
      textAnchor: "middle",
      textVerticalAnchor: "bottom",
      textWrap: {
        width: -10, // 宽度减少 10px
        ellipsis: true, // 文本超出显示范围时，自动添加省略号
        breakWord: true // 是否截断单词
      }
    }
  }
];
export const guanjianAttrs = value => ({
  guanjian: {
    refX: 0.5,
    refY: 0.5,
    refRx: 1,
    refRy: 1,
    stroke: "#f00",
    strokeWidth: 2,
    strokeDasharray: "5,10",
    fill: "none"
  },
  guanjianLabel: {
    refX: 0.5,
    refY: -10,
    fontSize: 16,
    fill: "#f00",
    textWrap: {
      text: value,
      height: "50%" // 高度为参照元素高度的一半
    }
  }
});

/**
 * 流程接口自定义按钮
 * 这里设置了一个位于右下角的接口调整按钮
 * 如果已经关联了流程则节点加入此按钮
 */
export const configNodeLink = THE => {
  return [
    {
      name: "button",
      args: {
        markup: [
          {
            tagName: "path",
            attrs: {
              cursor: "pointer",
              transform: "scale(0.02,0.02)",
              d:
                "M1001.175714 593.762001L700.806246 293.324796a76.091491 76.091491 0 0 0-107.566725 0 76.023754 76.023754 0 0 0 0 107.544146l171.713884 171.826779H152.653982v-115.288769a76.046333 76.046333 0 0 0-152.115245 0v152.092666c0 6.931777 2.145012 13.253918 3.951338 19.621218-1.806326 6.389879-3.951339 12.644283-3.951338 19.621218a76.068912 76.068912 0 0 0 76.046333 76.068912h686.020111L593.239521 894.131468a76.046333 76.046333 0 1 0 107.566725 107.566726L1001.175714 701.328726a76.091491 76.091491 0 0 0 0-107.566725z"
            }
          }
        ],
        x: "100%",
        y: "100%",
        offset: { x: -30, y: -30 },
        onClick({ cell }) {
          const { linkId } = cell.getData();
          if (linkId) {
            THE.toLinkProcess(linkId);
          }
        }
      }
    }
  ];
};
/**
 * 节点连接桩设置
 * 这里设置了上下左右四个
 * 并且给style设置了 visibility: 'hidden'，默认是隐藏的。
 * 如果设置了隐藏记得在画布里面设置鼠标经过显示。
 * graph.on('node:mouseenter', () => {
        const container = document.getElementById('wrapper')
        const ports = container.querySelectorAll('.x6-port-body')
        for (let i = 0, len = ports.length; i < len; i = i + 1) {
          ports[i].style.visibility = val ? 'visible' : 'hidden'
        }
    })
 * 如果需要常显去掉每个链接桩里面的
 style: {
        visibility: 'hidden',
     },
 * 就可以了
 */
export const configNodePorts = (visibility = "hidden") => {
  return {
    groups: {
      top: {
        position: "top",
        attrs: {
          circle: {
            r: 6,
            magnet: true,
            stroke: "#5F95FF",
            strokeWidth: 1,
            fill: "#fff",
            style: {
              visibility: visibility
            }
          }
        }
      },
      right: {
        position: "right",
        attrs: {
          circle: {
            r: 6,
            magnet: true,
            stroke: "#5F95FF",
            strokeWidth: 1,
            fill: "#fff",
            style: {
              visibility: visibility
            }
          }
        }
      },
      bottom: {
        position: "bottom",
        attrs: {
          circle: {
            r: 6,
            magnet: true,
            stroke: "#5F95FF",
            strokeWidth: 1,
            fill: "#fff",
            style: {
              visibility: visibility
            }
          }
        }
      },
      left: {
        position: "left",
        attrs: {
          circle: {
            r: 6,
            magnet: true,
            stroke: "#5F95FF",
            strokeWidth: 1,
            fill: "#fff",
            style: {
              visibility: visibility
            }
          }
        }
      }
    },
    items: [
      {
        group: "top"
      },
      {
        group: "right"
      },
      {
        group: "bottom"
      },
      {
        group: "left"
      }
    ]
  };
};

// 连线 label 设置
export const configEdgeLabel = (labelText, fontColor, fill, stroke) => {
  if (!labelText)
    return {
      attrs: { labelText: { text: "" }, labelBody: { fill: "", stroke: "" } }
    };
  return {
    markup: [
      {
        tagName: "rect",
        selector: "labelBody"
      },
      {
        tagName: "text",
        selector: "labelText"
      }
    ],
    attrs: {
      labelText: {
        text: labelText || "",
        fill: fontColor || "#333",
        textAnchor: "middle",
        textVerticalAnchor: "middle"
      },
      labelBody: {
        ref: "labelText",
        refX: -8,
        refY: -5,
        refWidth: "100%",
        refHeight: "100%",
        refWidth2: 16,
        refHeight2: 10,
        stroke: stroke || "#555",
        fill: fill || "#fff",
        strokeWidth: 1,
        rx: 5,
        ry: 5
      }
    }
  };
};

// 键盘事件
export const graphBindKey = (graph, message) => {
  // undo redo
  graph.bindKey(["meta+z", "ctrl+z"], () => {
    if (graph.history.canUndo()) {
      graph.history.undo();
    }
    return false;
  });
  graph.bindKey(["meta+shift+z", "ctrl+shift+z"], () => {
    if (graph.history.canRedo()) {
      graph.history.redo();
    }
    return false;
  });
  // select all
  graph.bindKey(["meta+a", "ctrl+a"], () => {
    const nodes = graph.getNodes();
    if (nodes) {
      graph.select(nodes);
    }
  });
  // delete
  /*
  graph.bindKey('delete', () => {
    const cells = graph.getSelectedCells()
    if (cells.length) {
      graph.removeCells(cells)
    }
  })
  */
  graph.bindKey("ctrl+c", () => {
    const cells = graph.getSelectedCells();
    if (cells && cells.length) {
      graph.copy(cells);
      message.success("复制成功");
    } else {
      message.info("请先选中节点再复制");
    }
  });
  graph.bindKey("ctrl+v", () => {
    if (graph.isClipboardEmpty()) {
      message.info("剪切板为空，不可粘贴");
    } else {
      const cells = graph.paste();
      //处理黏贴中的数据
      try {
        cells.forEach(item => {
          if (item.isNode()) {
            //如果是节点，则删除业务数据 ，包括：节点关联信息id。流程接口关联id
            const { data } = item;
            for (const dataKey in data) {
              if (dataKey.toLowerCase().indexOf("id") !== -1) {
                delete item.data[dataKey];
              }
            }
            //如果是流程接口节点则清除流程跳转工具图标
            if (item.hasTool("button")) {
              item.removeTool("button");
            }

            // 清除关键控制节点样式
            item.markup = item.markup.filter(
              item =>
                item.selector !== "guanjian" &&
                item.selector !== "guanjianLabel"
            );
            const { guanjian, guanjianLabel } = item.getAttrs();
            if (guanjian && guanjianLabel) {
              const obj = JSON.parse(JSON.stringify(item.attrs));
              delete obj.guanjian;
              delete obj.guanjianLabel;
              item.replaceAttrs({
                ...obj
              });
            }
          } else if (item.isEdge()) {
            graph.updateCellId(item,"line-" + uuid())
            //如果是边
          }
        });
      } catch (e) {
        console.log(e);
      }
      //选中黏贴的基类
      graph.cleanSelection();
      graph.select(cells);
      message.success("粘贴成功");
    }
  });
  // zoom
  graph.bindKey(["ctrl+1", "meta+1"], () => {
    const zoom = graph.zoom();
    if (zoom < 1.5) {
      graph.zoom(0.1);
    }
  });
  graph.bindKey(["ctrl+2", "meta+2"], () => {
    const zoom = graph.zoom();
    if (zoom > 0.5) {
      graph.zoom(-0.1);
    }
  });
  return graph;
};
